<template>
  <header>
    <nav class="container">
      <a href="">
        <div class="title">
          <i class="iconfont icon-tianqitubiao_qingtianbai"></i>
          <p>新中地天气</p>
        </div>
      </a>
      <div class="info-1">
        <h4>{{ IPData.city }}</h4>
        <span v-if="WeatherData.lives && WeatherData.lives.length > 0"
          >实时天气:{{ WeatherData.lives[0].weather }}
          {{ WeatherData.lives[0].temperature }}℃</span
        >
        <span v-if="WeatherData.lives && WeatherData.lives.length > 0"
          >{{ WeatherData.lives[0].winddirection
          }}{{ WeatherData.lives[0].windpower }}级</span
        >
      </div>
      <div class="help">
        <i class="iconfont icon-zhuyishixiang" @click="handleClick"></i>
        <i
          class="iconfont icon-jia"
          v-if="shouldShowAddButton"
          @click="handleAdd"
        ></i>
      </div>
    </nav>
  </header>
  <NoticeModal :visible="isNoticeVisible" @close="handleClose"></NoticeModal>
</template>

<script setup>
import { ref, onMounted, inject, computed, watch } from 'vue'
import NoticeModal from './NoticeModal.vue'
import { getIPData, getWeatherData } from '@/API'
import { useRoute } from 'vue-router'

// 接收props
const props = defineProps({
  weatherData: {
    type: Object,
    default: () => ({}),
  },
})

// 事件发射器
const emit = defineEmits(['update:addButtonVisibility'])

const IPData = ref({})
const WeatherData = ref({})
const route = useRoute()
const isNoticeVisible = ref(false)
const AddShow = ref(true)

// 注入全局方法
const addCity = inject('addCity')
const savedCities = inject('savedCities', ref([]))
const visitedCities = inject('visitedCities', ref([]))

const handleClick = () => {
  isNoticeVisible.value = true
}

const handleClose = () => {
  isNoticeVisible.value = false
}

const handleAdd = () => {
  // 获取当前路由中的城市信息
  const cityName = route.query.search
  const adcode = route.params.adcode

  // 获取当前页面的天气数据
  const weatherInfo =
    props.weatherData.lives && props.weatherData.lives.length > 0
      ? props.weatherData.lives[0]
      : null

  // 获取当前页面的天气数据（需要从父组件传递过来或重新获取）
  // 这里假设可以从全局状态或其他方式获取到温度信息
  if (cityName && adcode && weatherInfo) {
    // 创建城市信息对象
    const cityInfo = {
      name: cityName,
      adcode: adcode,
      temperature: weatherInfo.temperature,
      weather: weatherInfo.weather,
    }

    // 调用注入的方法保存城市信息
    addCity(cityInfo)

    // 隐藏加号按钮
    AddShow.value = false
  }
}

// 计算属性：检查当前城市是否已保存
const isCurrentCitySaved = computed(() => {
  // 获取当前路由中的城市信息
  const cityName = route.query.search
  const adcode = route.params.adcode

  // 检查当前城市是否已保存
  if (cityName && adcode) {
    return savedCities.value.some(
      (city) => city.name === cityName && city.adcode === adcode
    )
  }
  return false
})

// 计算属性：检查当前城市是否已访问
const isCurrentCityVisited = computed(() => {
  // 获取当前路由中的城市信息
  const cityName = route.query.search
  const adcode = route.params.adcode

  // 检查当前城市是否已访问
  if (cityName && adcode) {
    return visitedCities.value.some(
      (city) => city.name === cityName && city.adcode === adcode
    )
  }
  return false
})

const shouldShowAddButton = computed(() => {
  return (
    route.name === 'cityWeather' &&
    AddShow.value &&
    !isCurrentCitySaved.value &&
    !isCurrentCityVisited.value
  )
})

// 监听shouldShowAddButton变化
watch(shouldShowAddButton, (newValue) => {
  emit('update:addButtonVisibility', newValue)
})
onMounted(async () => {
  IPData.value = await getIPData()
  WeatherData.value = await getWeatherData(IPData.value.adcode, 'base')

  // console.log(WeatherData)
  //  console.log(IPData)
})
</script>

<style lang="scss" scoped>
header {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 10px 15px -3px rgb(0, 0, 0, 0.1);
  .container {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 24px 160px;
    margin: 0 183.5px;

    color: white;

    a {
      color: inherit;
      text-decoration: inherit;
      .title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        i {
          font-size: 1.5rem;
          line-height: 2rem;
        }
        p {
          font-size: 1.5rem;
          line-height: 2rem;
        }
      }
    }

    .info-1 {
      display: flex;
      align-items: center;
      gap: 1rem;
      h4 {
        font-weight: inherit;
        font-size: 1.125rem;
        line-height: 1.75rem;
      }
      span {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }

    .help {
      display: flex;
      flex: 1 1 0%;
      gap: 0.75rem;
      justify-content: flex-end;
      i {
        cursor: pointer;
        font-size: 1.3rem;
        line-height: 2rem;
        &:hover {
          transition-duration: 1s;
          color: rgb(0, 78, 113);
        }
      }
    }
  }
}
</style>
